<template>
  <view v-if="isPress&&!needCancel" class="cancel text-lg padding-xl round-bottom bg-grey">
    拖到此处取消
  </view>
  <view v-if="isPress&&needCancel" class="cancel text-lg padding-xl round-bottom bg-cyan">
    释放取消发送
  </view>
  <view v-show="show" style="height: 110px" class="bg-white ">
    <view class="flex flex-sub justify-center align-center"
          style="z-index: 100"
          @touchmove="pressMove"
          @touchstart="startRecord" @touchend="endRecord">
      <view class="say flex justify-center align-center" :class="isPress?'say-hold':''">
        <view class="text-white" style="z-index: 99;">
          <text>{{ isPress ? '上滑取消' : '长按说话' }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {defineEmits, defineProps, ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import {fileUrlPathPrefix, uploadVoice} from '/settings'

const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();

const url = uploadVoice.url
const name = uploadVoice.name
const prefix = fileUrlPathPrefix
const isPress = ref(false)
const needCancel = ref(false)
const pageX = ref()
const pageY = ref()

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['onSend'])


onLoad(() => {
  recorderManager.onStop(function (res) {
    console.log('recorder stop' + JSON.stringify(res));
    if (!needCancel.value) {
      uni.uploadFile({
        url: url,
        filePath: res.tempFilePath,
        name: name,
        success: (uploadFileRes) => {
          let tmp = JSON.parse(uploadFileRes.data).data
          emits('onSend', tmp, Math.ceil(res.duration * 1.0 / 1000))
        }
      });
    } else {
      needCancel.value = false
    }
  });
})

const pressMove = (e: any) => {
  needCancel.value = Math.abs(pageX.value - e.touches[0].pageX) > 0 && pageY.value - e.touches[0].pageY > 50;
}
const startRecord = (e: any) => {
  pageX.value = e.touches[0].pageX
  pageY.value = e.touches[0].pageY
  isPress.value = true
  recorderManager.start({});
}
const endRecord = () => {
  console.log('录音结束');
  recorderManager.stop();
  isPress.value = false
}

const playVoice = (value: any) => {
  let src = prefix + value
  innerAudioContext.src = src
  innerAudioContext.play();
}

</script>

<style scoped>
.cancel {
  position: fixed;
  bottom: 140px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 100;
  width: 50vw;
  text-align: center;
}


.say {
  width: 100px;
  height: 100px;
  position: relative;
}

.say-hold {
  content: '';
  width: 100px;
  height: 100px;
  border-radius: 50%;
  z-index: 5;
  background: rgba(48, 124, 237, 0.08);
  animation: clock-scale 1s infinite alternate-reverse;
}

.say::before {
  position: absolute;
  z-index: 11;
  content: '';
  width: 88px;
  height: 88px;
  background: rgb(48, 124, 237, 0.79);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

</style>